<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../../../resources/js/echarts/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">

    window.onload = function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        myChart.showLoading();

        var indicator = [{
            "company":"子公司",
            "point":"触点名称",
            "type":"指标类型",
            "2020":"年度累计达成",
            "2019":"2019累计达成",
            "change":"趋势变化"
        }];

        var color = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];

        var url = "../data/table.json";/*json文件url*/
        var request = new XMLHttpRequest();
        request.open("get", url);/*设置请求方法与路径*/
        request.send(null);/*不发送数据到服务器*/
        request.onload = function () {/*XHR对象获取到返回信息后执行*/
            if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                var data = JSON.parse(request.responseText);
                if(data&&data.indicator){
                    data.indicator.forEach(function (ele) {
                        indicator.push(ele);
                    })
                }
                var series = [];

                series.push({
                    name : "数据集成表单",
                    type : "custom",
                    data : indicator,
                    coordinateSystem : "none",
                    renderItem : function (params , api) {
                        var style = api.style({
                            stroke: 'black',
                            fill: params.dataIndex === 0 ? '#dcdcdc' : null
                        });
                        var apiWidth = api.getWidth();
                        var apiHeight = api.getHeight();
                        var font;
                        var height;
                        var width = apiWidth*0.12;
                        var y0;
                        if (params.dataIndex === 0) {
                            font = 'bolder 1.5em "Microsoft YaHei", sans-serif';
                            height = apiHeight * 0.2;
                            y0 = apiHeight * 0.1 + 1;
                        } else {
                            font = '1.1em "Microsoft YaHei", sans-serif';
                            height = apiHeight * 0.15;
                            y0 = apiHeight * 0.15 + params.dataIndex * height + 1;
                        }
                        var x0 = apiWidth * 0.1;

                        var value = indicator[params.dataIndex];
                        return {
                            type: 'group',
                            children: [{//维度1，横向
                                type: 'rect',
                                shape: {
                                    x: x0,
                                    y: y0,
                                    width: 0.15 * apiWidth,
                                    height: height
                                },
                                style: style
                            }, {
                                type: 'text',
                                style: {
                                    text: value.company,
                                    font: font,
                                    x: x0+0.05*apiWidth,
                                    y: y0 + height/3
                                }
                            }, {//维度2
                                type: 'rect',
                                shape: {
                                    x: x0 + 0.15 * apiWidth,
                                    y: y0,
                                    width: 0.15 * apiWidth,
                                    height: height
                                },
                                style: style
                            }, {
                                type: 'text',
                                style: {
                                    text: value.point,
                                    font: font,
                                    x: x0+0.2*apiWidth,
                                    y: y0 + height/3
                                }
                            },{//维度3
                                type: 'rect',
                                shape: {
                                    x: x0 + 0.3*apiWidth,
                                    y: y0,
                                    width: 0.12 * apiWidth,
                                    height: height
                                },
                                style: style
                            }, {
                                type: 'text',
                                style: {
                                    text: value.type,
                                    font: font,
                                    x: x0 + 0.34*apiWidth,
                                    y: y0 + height/3
                                }
                            },{//维度4
                                type: 'rect',
                                shape: {
                                    x: x0+0.42*apiWidth,
                                    y: y0,
                                    width: 0.12 * apiWidth,
                                    height: height
                                },
                                style: style
                            }, {
                                type: 'text',
                                style: {
                                    text: value['2020'],
                                    font: font,
                                    x: x0 + 0.46*apiWidth,
                                    y: y0 + height/3
                                }
                            },{//维度5
                                type: 'rect',
                                shape: {
                                    x: x0+0.54*apiWidth,
                                    y: y0,
                                    width: 0.12 * apiWidth,
                                    height: height
                                },
                                style: style
                            }, {
                                type: 'text',
                                style: {
                                    text: value['2019'],
                                    font: font,
                                    x: x0 + 0.58*apiWidth ,
                                    y: y0 + height/3
                                }
                            },{//维度6
                                type: 'rect',
                                shape: {
                                    x: x0+0.66*apiWidth,
                                    y: y0,
                                    width: 0.12 * apiWidth,
                                    height: height
                                },
                                style: style
                            }, {
                                type: 'text',
                                style: {
                                    text: value.change,
                                    font: font,
                                    x: x0 +0.7*apiWidth ,
                                    y: y0 + height/3
                                }
                            }
                            ]
                        };
                    }
                });

                var option = {
                    title : {
                        text:'数据集成表单'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    series : series
                }

                myChart.hideLoading();

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }


    }
</script>
</body>
</html>